<template>
	<view>
		<view v-if="mode=='button'"
			:style="{display: 'grid',gridTemplateColumns: 'repeat('+repeat+')',gridColumnGap:gridColumnGap,gridRowGap:gridRowGap,padding:padding}">
			<view v-for="(state,idx) in list" style="width: 100%;">
				<u-button :type="type" @click="clickHandle(state.value)" :throttle-time="0"
					:plain="isChecked(state.value)">{{state.label}}</u-button>
			</view>
			<view style="width: 100%;">
				<u-button :type="sort_order=='descending'?'success':'warning'" @click="changeSortOrder()"
					:throttle-time="0">{{sort_order=='descending'?'降序排序':'升序排序'}}</u-button>
			</view>
		</view>
		<view v-else>改模式还没有开发。。。</view>
	</view>
</template>

<script>
	export default {
		name: "OrderSortCheckBox",
		props: {
			mode: {
				type: String,
				default: 'button'
			},
			type: {
				type: String,
				default: "primary"
			},
			repeat: {
				type: String,
				default: '2,1fr'
			},
			gridColumnGap: {
				type: String,
				default: '30rpx'
			},
			gridRowGap: {
				type: String,
				default: '20rpx'
			},
			padding: {
				type: String,
				default: '20rpx'
			},
			list: {
				type: Array,
				default: [{
					label: '录入时间',
					value: 1
				}, {
					label: '出车时间',
					value: 2
				}, {
					label: '还车时间',
					value: 3
				}, {
					label: '取还车时间',
					value: 4
				}]
			},
			defaultchecked: {
				type: Array,
				default: () => []
			}
		},
		watch: {
			defaultchecked() {
				this.checkedList = this.defaultchecked;
			}
		},
		data() {
			return {
				checkedList: [],
				sort_order: 'ascending'
			};
		},
		mounted() {
			this.checkedList = this.defaultchecked;
		},
		methods: {
			isChecked(e) {
				return !this.checkedList.includes(e);

			},
			clickHandle(e) {
				this.checkedList = [e];
				this.$emit("change", this.checkedList);
			},
			changeSortOrder() {
				if(this.sort_order=='descending'){
					this.sort_order='ascending';
				}else{
					this.sort_order='descending';
				}
				this.$emit("changeSortOrder", this.sort_order);
			}

		}
	}
</script>

<style>

</style>